<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="pc/include :: header('vip')" />

    <link th:href="@{/js/ui-table/ui-table.css}" rel="stylesheet"/>
</head>
<body>
<th:block th:include="pc/include :: top" />
<div class="iw">
    <div class="crumbs">
        <p>当前位置：<a href="/">首页</a> > <a href="/user/center">个人中心</a> > 开通VIP</p>
    </div>
    <div class="center_left">
        <th:block th:include="pc/include :: menu" />
    </div>
    <div class="center_right">
        <h1 class="vip_head">开通/续费VIP</h1>
        <div class="vip_stepone unselect">
            <h3>1.选择VIP开通/续费时长</h3>
            <div th:each="item,userStat :${vipgroup}" th:attr="data-id=${item.vgroupid},data-val=${item.cash2}"  th:classappend="${item.suggest}?'active'"><i></i><ii  th:if="${item.suggest}">推荐</ii>
                <h5><div th:text="${item.vgroupname}" th:remove="tag"></div><span><div th:text="${item.vipdays}" th:remove="tag"></div>天</span></h5>
                <h6>¥<div th:text="${item.cash2}" th:remove="tag"></div><s th:text="${item.cash}!=${item.cash2}?${'¥'+item.cash+''}:''"></s></h6>
            </div>
        </div>
        <div class="vip_steptwo">
            <h3>2.请选择以下方式支付</h3>

            <div th:each="item :${paysetlist}" th:remove="tag">
                <div th:if="${item.id==1} and ${item.state==1}" class="weipay active">
                    <i></i>
                    <img alt="二扫码支付" th:src="@{/img/weipay.png}" />
                </div>
                <div th:if="${item.id==2} and ${item.state==1}" class="alipay">
                    <i></i>
                    <img alt="二扫码支付" th:src="@{/img/alipay.png}" />
                </div>
            </div>
        </div>
        <div class="vip_stepthr">
            <h3>3.请支付金额 <span id="vip_cash">¥ <span th:text="${suggest}?${suggest.cash2}:0" th:remove="tag"></span></span> 元</h3>
            <div th:each="item :${paysetlist}" th:remove="tag">
                <div th:if="${item.id==1} and ${item.state==1}" class="weipayma">
                    <img alt="二扫码支付" th:src="@{/weipay.html(vgroupid=${suggest}?${suggest.vgroupid}:-1)}" />
                    <span><i></i>使用微信扫码付款</span>
                </div>
                <div th:if="${item.id==2} and ${item.state==1}" class="alipayma" style="display:none">

                    <div th:if="${isewm}" th:remove="tag">
                        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" th:src="@{alipay.html(vgroupid=${suggest}?${suggest.vgroupid}:-1)}"></iframe>
                        <span><i></i>支付宝扫码付款</span>
                    </div>

                    <a th:if="${isewm}==0" class="ui-btn ui-btn-blue" target="_blank" th:href="@{alipay.html(vgroupid=${suggest}?${suggest.vgroupid}:-1)}">点击付款</a>

                </div>
             </div>
        </div>
    </div>
</div>
<th:block th:include="pc/include :: footer" />

<script th:src="@{/js/ui_stable/ui_stable.js}"></script>
<script>
    $(function() {
        var id = [(${suggest.vgroupid})]?[(${suggest.vgroupid})]:-1;
        $(".vip_stepone div").click(function() {
            $this = $(this);
            $(".vip_stepone div").removeClass("active");
            $this.addClass("active");

            $("#vip_cash").text('¥ ' + $this.attr("data-val"));
            id = $(this).attr("data-id");
            $(".weipayma img").attr("src", "/weipay.html?vgroupid="+id);
            $(".alipayma img,.alipayma iframe").attr("src", "/alipay.html?vgroupid="+id);
            $(".alipayma a").attr("href", "/alipay.html?vgroupid="+id);
            i = 100;
        });

        $(".vip_steptwo div").click(function() {
            $this = $(this);
            $(".vip_steptwo > div").removeClass("active");

            $(".vip_stepthr > div").hide();
            $("." + $this.attr("class") + "ma").show();

            $this.addClass("active");
        });

        setInterval(function() {
            $.get("/user/vippaystate/" + id, function(data) {
                if (data) {
                    window.location.href = "/user/vippayfinish/" + data;
                }
            });
        },3000);

    });
</script>